<template>
  <div id="app">
    <!-- seller变量通过props属性传给header组件 -->
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
        <div class="table-item">
          <router-link to="/goods">商品</router-link>
        </div>
        <div class="table-item">
          <router-link to="/ratings">评论</router-link>
        </div>
        <div class="table-item">
          <router-link to="/seller">商家</router-link>
        </div>
    </div>
    <!-- <div class="content">
        i am content
    </div> -->
    <!-- 通过上面标签路由的切换，将相对应的组件展示在下面的组件中 -->
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import header from './components/header/header.vue';
import { urlParse } from '../src/common/js/util.js';

const ERR_OK = 0; // 定义ok的状态码
export default {
  data() {
    return {
      seller: {
        id: (() => {
          let queryParam = urlParse();
          // console.log(queryParam.id);
          return queryParam.id;
        })()
      }
    };
  },
  created() {
    this.$http.get('/api/seller?id=' + this.seller.id).then(res => {
      // console.log(res.body.errno);
      if (res.body.errno === ERR_OK) {
        // this.seller = res.body.data; // 直接这样赋值的话，data中seller 里面的属性 id 会被覆盖（丢弃）掉
        // console.log(this.seller);
        this.seller = Object.assign({}, this.seller, res.body.data); // Vue官网推荐给对象 扩展属性 的方法
        console.log(this.seller.id);
      }
    });
  },
  name: 'App',
  components: {
      'v-header': header
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  #app
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      text-align: center
      //border-bottom: 1px solid rgba(7,17,27,0.1)
      border-1px(rgba(7,17,27,0.1))
      .table-item
        flex: 1
        text-align: center
        & > a
          display: block
          font-size: 14px
          color: rgb(77, 85, 93)
          &.active
            color: rgb(240, 20, 20)
</style>
